<script setup>
import PostList from '@/views/PostListViews/components/PostList.vue'
import { userCenterStore } from '@/stores/userCenterStore'
import { useRoute } from 'vue-router'
import { useUserPostsQuery,useUserPostsDataQuery } from '@/composables/usePostDataQuery'
import LfEmpty from '@/components/commonUI/LfEmpty.vue'


const props = defineProps({
  type: {
    type: Number,
  },
  topicExplore: String,
  isEdit: {
    type: Boolean,
    default: false,
  },
})
const store = userCenterStore()

const route = useRoute()

const routeUid = ref(route.params.uid)

const { data: postData, fetchNextPage, isFetching } = useUserPostsQuery(routeUid)
const { data: postDataInfo, fetchNextPage:getfetchNextPage , hasNextPage, isFetching: isFetchingStatus } = useUserPostsDataQuery()

const flattenedData = computed(() => postData.value?.pages.flatMap((page) => page.result.data) ?? [])
const flattenedDataInfo = computed(() => postDataInfo.value?.pages.flatMap((page) => page.result.data) ?? [])
const loadMore = () => {
  if (isFetching.value) return

  fetchNextPage()
}
const loadMoreInfo = () => {
  if (isFetchingStatus.value) return

  getfetchNextPage()
}

watch(route, (newRoute, oldRoute) => {
  routeUid.value = Number(newRoute.params.uid)
})
</script>

<template>
  <div v-infinite-scroll="loadMore" v-if="type === 1">
    <LfEmpty v-if="flattenedData?.length === 0" emptyText="暂无帖子" />
    <PostList :topicExplore="topicExplore" v-if="store.activeIndex === 0" :posts-data="flattenedData" :isEdit="isEdit" />
  </div>
  <div v-infinite-scroll="loadMoreInfo" v-if="type === 2">
    <LfEmpty v-if="flattenedDataInfo?.length === 0" emptyText="暂无帖子" />
    <PostList v-if="store.activeIndex === 4" :posts-data="flattenedDataInfo" />
  </div>
</template>
